<template>

	<div>
		<view class="u-page" style="padding-bottom: 240rpx" >

			<div>

				<div style="height: 600rpx;">

					<div class="bigImage">
						<!--					<image  class="image-w" :showLoading="true" :src="src" ></image>-->

						<u-swiper
								:list="list5"
								@change="e => currentNum = e.current"
								:autoplay="true"
								indicatorStyle="right: 20px"
								:height= "swiperHeight"
								:interval="3000"
						>
							<view
									slot="indicator"
									class="indicator-num"
							>
								<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list5.length }}</text>
							</view>
						</u-swiper>

					</div>

					<div class="bigImage" style="z-index:9999" >
						<div class="maiche-detail" >
							<div style="border-radius: 50%;border: 0.5px solid;background-color: rgba(0,0,0,0.4);height: 40rpx;width: 40rpx" @click="fanhui">
								<u-icon name="arrow-left" style="margin-top: 7rpx;margin-left: 4rpx" color="white" size="15" ></u-icon>
							</div>
							<div style="margin-left: 570rpx">
								<u-icon name="../../static/maiche/zhuanfa.png"   size="15"></u-icon>
							</div>
							<div style="margin-left: 20rpx">
								<u-icon name="../../static/maiche/lingdang.png"   size="15"></u-icon>
								<!--							<img src="../../static/maiche/lingdang.png" style="height: 40rpx;width: 100%;" alt="Other Icon">-->
							</div>
						</div>
					</div>

					<div class="bigImage">
						<div class="maiche-detail1">
							<u-icon name="list-dot"  color="white" :bold="true" label="参数配置"  labelPos="bottom" labelColor="white" labelSize="10px" size="20"></u-icon>
						</div>
					</div>

					<div class="bigImage">
						<div class="detail-div">
							<div style="margin-left: 20rpx;margin-top: 25rpx">
								<span style="font-size: 14px;font-weight: bold">588ku. 2016款  2.0T  自动尊享型  带天窗</span>
							</div>

							<div class="detail-pl">
								<div style="margin-left: 20rpx;background-color: #e0e0eb;width: 80px;border-radius: 15rpx;padding-left:10rpx ;">
									<span style="font-size: 12px;">金牌认证</span>
								</div>
								<div style="margin-left: 50rpx;background-color: #e0e0eb;width: 80px;display: flex;justify-content: center;align-items: center;border-radius: 15rpx;">
									<span style="font-size: 12px;">性价比超高</span>
								</div>
							</div>

							<!--<div class="detail-pl1">
								<div style="margin-left: 20rpx">
									<span style="color: orangered;font-size: 10px">￥</span><span style="color: orangered;font-size: 18px">5.2万</span>
								</div>
								<div style="margin-left: 170rpx">
									<span style="font-size: 12px">首付:0.89万</span>
								</div>
								<div style="margin-left: 15rpx">
									<span style="font-size: 12px">月供:2203元</span>
								</div>
								<div style="margin-left: 20rpx;display: flex;justify-content: center;align-items: center;">
									<u-icon name="arrow-right" size="12"></u-icon>
								</div>
							</div>-->
							<div  style="margin-top: 20rpx;display: flex;height: 25px;width: 100%;">
								<div style="margin-left: 20rpx;width: 30%;">
									<span style="color: orangered;font-size: 10px">￥</span><span style="color: orangered;font-size: 18px">5.2万</span>
								</div>
								<div style="display: flex;justify-content: flex-end;align-items: center;width: 70%;">
									<span style="font-size: 0.83rem;;margin-left: 2vw">首付:0.89万</span>
									<span style="font-size: 0.83rem;;margin-left: 2vw">月供:2203元</span>
									<u-icon name="arrow-right" size="12" style="margin-left: 1vw"></u-icon>
								</div>
							</div>



						</div>
					</div>

				</div>

				<!-- 线条 -->
				<div style="margin-top: 150rpx;">
					<view>
						<hr size=5  style="background-color:gainsboro;border: none;">
					</view>
				</div>


				<div style="margin-left: 20rpx;margin-top: 10rpx">
					<span style="font-size: 15px;font-weight: bold">车辆档案</span>
				</div>


				<!-- 线条 -->
				<div style="margin-top: 20rpx;">
					<view>
						<u-line></u-line>
					</view>
				</div>


				<div style="margin-top: 20rpx;margin-left: 25rpx;margin-right: 25rpx">
					<div>
						<u-row

								gutter="5"
						>
							<u-col span="4">
								<view >
									<div>
										<div>
											<span style="font-size: 8rpx;color: #7A7E83;font-weight: lighter;">2016年03月上牌</span>
										</div>
										<div style="margin-top: 10rpx">
											<span style="font-size: 15px;font-weight: bold;">3年4个月</span>
										</div>
									</div>
								</view>
							</u-col>
							<u-col span="4">
								<view>
									<div style="display: flex;justify-content: center;align-items: center;">
										<span style="font-size: 8rpx;color: #7A7E83;font-weight: lighter;">表显里程</span>
									</div>
									<div style="margin-top: 10rpx;display: flex;justify-content: center;align-items: center;">
										<span style="font-size: 15px;font-weight: bold;">3.6万公里</span>
									</div>
								</view>
							</u-col>
							<u-col span="4">
								<view>
									<div style="display: flex;justify-content: center;align-items: center;">
										<span style="font-size: 8rpx;color: #7A7E83;font-weight: lighter;">排放标准</span>
									</div>
									<div style="margin-top: 10rpx;display: flex;justify-content: center;align-items: center;">
										<span style="font-size: 15px;font-weight: bold;">国5</span>
									</div>
								</view>
							</u-col>
						</u-row>
					</div>
				</div>

				<div style="margin-top: 20rpx;margin-left: 25rpx;margin-right: 25rpx">
					<div>
						<u-row

								gutter="5"
						>
							<u-col span="4">
								<view >
									<div>
										<div>
											<span style="font-size: 8rpx;color: #7A7E83;font-weight: lighter;">颜色</span>
										</div>
										<div style="margin-top: 10rpx">
											<span style="font-size: 15px;font-weight: bold;">白色</span>
										</div>
									</div>
								</view>
							</u-col>
							<u-col span="4">
								<view>
									<div style="display: flex;justify-content: center;align-items: center;">
										<span style="font-size: 8rpx;color: #7A7E83;font-weight: lighter;">自然吸气</span>
									</div>
									<div style="margin-top: 10rpx;display: flex;justify-content: center;align-items: center;">
										<span style="font-size: 15px;font-weight: bold;">2.0L</span>
									</div>
								</view>
							</u-col>
							<u-col span="4">
								<view>
									<div style="display: flex;justify-content: center;align-items: center;">
										<span style="font-size: 8rpx;color: #7A7E83;font-weight: lighter;">提车时间</span>
									</div>
									<div style="margin-top: 10rpx;display: flex;justify-content: center;align-items: center;">
										<span style="font-size: 15px;font-weight: bold;">5-7天</span>
									</div>
								</view>
							</u-col>
						</u-row>
					</div>
				</div>


				<!-- 线条 -->
				<div style="margin-top: 30rpx;">
					<view>
						<hr size=5  style="background-color:gainsboro;border: none;">
					</view>
				</div>

				<div style="margin-left: 20rpx;margin-top: 10rpx">
					<span style="font-size: 15px;font-weight: bold">购车服务</span>
				</div>

				<!-- 线条 -->
				<div style="margin-top: 20rpx;">
					<view>
						<u-line></u-line>
					</view>
				</div>


				<div style="margin-top: 10rpx">
					<div style="margin-left: 25rpx;margin-right: 25rpx">
						<u-row
								gutter="10"
						>
							<u-col span="3">
								<view>
									<div>
										<div>
											<span style="font-size: 15rpx;color: #7A7E83;font-weight: lighter;">认证服务</span>
										</div>
									</div>
								</view>
							</u-col>
							<u-col span="9">
								<view >
									<div style="margin-top: 10rpx">
										<span style="font-size: 15rpx;color: #7A7E83;font-weight: lighter;">315项检测 无重大事故 无水泡 无火烧</span>
									</div>
								</view>
							</u-col>
						</u-row>
					</div>
				</div>



				<!--加载更多-->
				<div class="shouye">

					<div style="margin-top: 80rpx">
						<div>
							<div v-for="(item, index) in list2" :key="index">{{ item }}</div>
							<div v-if="loading" class="loading">加载中...</div>
							<div v-else-if="hasMore" class="load-more" @click="loadMore">点击加载更多</div>
							<div v-else class="no-more">没有更多了</div>
						</div>
					</div>

				</div>


			</div>




		</view>


		<!--底部-->
		<div class="dibu-car">
			<u-row
					justify="space-between"
					gutter="10"
					style="margin-top: 15px;margin-right: 20rpx"
			>
				<u-col span="2">
					<view>
						<u-icon name="../../static/maiche/function10.png"  color="#2979ff" size="20" labelSize="12rpx" labelPos="bottom" label="对比"></u-icon>
					</view>
				</u-col>
				<u-col span="2">
					<view>
						<u-icon name="../../static/maiche/function9.png"  color="#2979ff" size="20" labelSize="12rpx" labelPos="bottom" label="收藏"></u-icon>
					</view>
				</u-col>
				<u-col span="4">
					<view>
						<u-button  class="anniu" type="warning "  style="border-radius: 18rpx;"   text="电话咨询"></u-button>
					</view>
				</u-col>
				<u-col span="4">
					<view>
						<u-button  class="anniu1" type="warning " style="border-radius: 18rpx;"   text="在线咨询" @click="message"></u-button>
					</view>
				</u-col>
			</u-row>
		</div>

	</div>



</template>

<script>
	export default {

	        data() {
	            return {
					src: '../../static/maiche/VehicleDetails_car.png',

					indicatorDots: true,
					list2: [],
					page: 1, // 页码
					pageSize: 10, // 每页条数
					loading: false, // 是否正在加载
					hasMore: true, // 是否还有更多
					swiperHeight: "510rpx",
					current: 0,
					currentNum: 0,
					list5: [
						'../../static/maiche/VehicleDetails_car.png',
						'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					],
				}
	        },

			methods:{
				message(){
					uni.navigateTo({
						//保留当前页面，跳转到应用内的某个页面
						url: '/pages/maiche/onlineConsulter'
					})
				},
				loadMore() {
					if (this.loading || !this.hasMore) {
						return
					}
					this.loading = false
					setTimeout(()=>{
						this.hasMore = false
					},2000)
					// 请求下一页数据
					// ...
				},
				loadmore() {
					// for (let i = 0; i < 2; i++) {
					// 	this.indexList.push({
					// 		url: this.urls[i]
					// 	})
					// }
				},
				fanhui(){
					// uni.switchTab({
					// 	url: '/pages/maiche/maiche',
					// })
					// 多层级下用这个
					uni.navigateBack({
						//关闭当前页面，返回上一页面或多级页面。
						delta: 1
					});
				}
			}
	    }
</script>

<style lang="scss" scoped>

	.dibu-car{

		height:60px;

		width:100%;

		background-color:#ffffff;

		position:fixed;

		bottom:0;

	}

	.anniu{
		background: linear-gradient(to bottom, #F4A600, #FF8828);
	}
	.anniu1{
		background: linear-gradient(to bottom, #04BEFE, #4481EB);
	}

	.bigImage{

		.image-w{
			width: 100%;
		}

	}


	.indicator-num {
		padding: 3px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	::v-deep .u-swiper__indicator{
		bottom: 22px;
		position: absolute;
		height: 18px;
	}



</style>
